<template>
	<div id="recharge">
		<van-nav-bar
			:title="$route.meta.title"
			left-arrow
			@click-left="this.$router.go(-1)"
			fixed
			safe-area-inset-top
			placeholder
		/>
		<div class="rechange">
			<span class="rechange-title">书币充值</span>
			<van-grid :column-num="2" :border="false">
				<van-grid-item v-for="i in 4" :key="i">
					<div
						class="rechange-item"
						:class="active ? 'active' : ''"
						@click="active = !active"
					>
						<span>送200币</span>
						<h4>200<small>元</small></h4>
						<p>2000币</p>
					</div>
				</van-grid-item>
			</van-grid>

			<span class="rechange-title">VIP充值</span>
			<van-grid :column-num="2" :border="false">
				<van-grid-item v-for="i in 2" :key="i">
					<div
						class="rechange-item"
						:class="active ? 'active' : ''"
						@click="active = !active"
					>
						<h4>98<small>元</small></h4>
						<p>月卡</p>
					</div>
				</van-grid-item>
			</van-grid>

			<span class="rechange-title">选择支付方式</span>
			<van-radio-group v-model="checked">
				<van-cell-group :border="false" class="themes-dark">
					<van-cell icon="ri ri-alipay-fill" title="支付宝" clickable @click="checked = '1'">
						<template #right-icon>
							<van-radio name="1" />
						</template>
					</van-cell>
					<van-cell icon="ri ri-wechat-pay-fill" title="微信支付" clickable @click="checked = '2'">
						<template #right-icon>
							<van-radio name="2" />
						</template>
					</van-cell>
					<van-cell icon="ri ri-paypal-fill" title="PayPal支付" clickable @click="checked = '3'">
						<template #right-icon>
							<van-radio name="3" />
						</template>
					</van-cell>
				</van-cell-group>
			</van-radio-group>

			<div class="rechange-submit">
				<van-button type="danger" block round>立即支付</van-button>
			</div>
		</div>
	</div>
</template>

<script>
import { defineComponent, ref } from "vue";

export default defineComponent({
	setup() {
		const active = ref(false);
		const checked = ref('1');
		
		return {
			active,
			checked
		};
	},
});
</script>
